<template>
  <div style="higth: 1000px">
    <!-- 导航栏开始 -->
    <!-- <div v-if="!isLogin" class="no-login" @click="toLogin">
          
            <span>点我去登录吧</span>
        </div> -->
    <div>
      <van-nav-bar title="购物车"> </van-nav-bar>
    </div>
    <!-- 导航栏结束 -->
    <div class="ts">
      <span>30天无优退货</span>
      <span>48小时快速退款</span>
      <span>满88元免邮费</span>
    </div>
    <!-- 购物车内容开始 -->
    <div class="cart">
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <van-card v-for="(item, index) in cartList" :key="index" :num="item.number" :price="item.price"
          :title="item.goodsName" :thumb="item.picUrl">
          <template #footer>
            <van-stepper v-model="item.number" integer />
            <van-checkbox :name="item" v-model="result" @click="singleCheck" :isCheck="isCheck"></van-checkbox>
          </template>
        </van-card>
      </van-checkbox-group>
    </div>
    <div class="check">
      <van-submit-bar :price="countPrice" :button-text="isCheck ? '删除' : '提交订单'" @submit="onClickButton(index)">
        <van-checkbox v-model="checkedAll" @click="checKed">全选</van-checkbox>
        <van-button round typee="danger" class="edit" @click="edit" :text="isCheck ? '完成' : '编辑'"></van-button>
      </van-submit-bar>
    </div>
    <router-view></router-view>
  </div>

  <div style="height: 100mm"></div>
</template>

<script>
import { service } from "@/api/config";
export default {
  data() {
    return {
      cartList: [],
      checkedAll: false,
      result: [],
      isCheck: false,
      shopPings: [],
      //删除商品数值
      deleteList: [],
      Address: JSON.parse(localStorage.getItem("userInfo")),
    };
  },
  created() {
    service
      .get("/wx/cart/index", {
        token: localStorage.getItem("token"),
      })
      .then((res) => {
        this.cartList = res.data.data.cartList;
        const a = [];
        this.cartList.forEach((res) => a.push(res.id));
        service
          .post(
            "/wx/cart/checked",
            JSON.stringify({
              cartIds: a,
              isChecked: false,
            })
          )
          .then((res) => { });
      });
  },
  computed: {
    //计算价格
    countPrice() {
      let numpric = 0;
      this.result.forEach((item) => {
        numpric += Number(item.price * item.number);
      });
      //   console.log(numpric);
      return numpric * 100;
    },
  },
  methods: {
    checKed() {
      if (this.checkedAll) {
        this.$refs.checkboxGroup.toggleAll(true);
        this.result = this.cartList;
        console.log(this.result);
      } else {
        this.result = [];
        this.$refs.checkboxGroup.toggleAll(false);
      }
    },
    singleCheck() {
      this.deleteList = this.cartList.map((item) => item.id);
      // console.log(this.deleteList);
      service
        .post("/wx/cart/checked", {
          cartIds: this.deleteList,
          isChecked: this.isCheck,
        })
        .then((res) => {
          if (this.result.length === this.cartList.length) {
            this.checkedAll = true;
          } else {
            this.checkedAll = false;
          }
          // console.log(res.data);
        });
    },
    onClickButton(index) {
      const infoArr = [];
      this.result.forEach((res) => {
        infoArr.push({
          id: res.id,
          name: res.goodsName,
          img: res.picUrl,
          num: res.number,
          specification: res.specifications,
          price: res.price,
        });
      });
      const cartId = infoArr.map((item) => item.id);
      console.log(cartId);
      if (this.isCheck == true) {
        service
          .post("/wx/cart/delete", JSON.stringify({ cartIds: cartId }))
          .then(res => {
            console.log(res);
            this.$router.go(0)
            this.cartList = res.data.data.cartList
          });
      } else {
        this.$store.commit("setValue", {
          key: "tocar",
          value: JSON.stringify(infoArr),
        });

        sessionStorage.setItem("mycartid", 0);
        service
          .post(
            "/wx/cart/checked",
            JSON.stringify({
              cartIds: cartId,
              isChecked: true,
            })
          )
          .then(res => {
            console.log(res);
          });
        this.$router.push("/OrderConfirm");
      }
    },
    edit() {
      this.isCheck = !this.isCheck;
      if (this.isCheck == false) {
        const promises = this.cartList.map(item => {
          return service.post('/wx/cart/update', {
            goodsId: item.goodsId,
            number: item.number,
            productId: item.productId,
            id: item.id
          });
        });
        Promise.all(promises)
          .then((results) => {

          })
      }
    }
  },
};
</script>
<style scoped>
.ts {
  display: flex;
  font-size: 10px;
  text-align: left;
  padding-left: 15px;
  color: #a3a3a3;
  margin: 10px 0;
  justify-content: space-around;
}

.left-icon {
  width: 80px;
  height: 2.5rem;
  line-height: 30px;
  text-align: center;
  font-size: 20px;
  border: 1px rgb(248, 244, 244) solid;
  border-radius: 50px;
  display: flex;
}

.van-nav-bar__right {
  display: flex;
  padding: 0 0;
}

.van-nav-bar .van-icon {
  color: var(--van-nav-bar-icon-color);
  margin: 0.6rem;
}

.edit {
  height: 0.9cm;
  margin: 20px;
  background-color: #a3a3a3;
}

.cart .de {
  margin-right: 20px;
}

.check {
  display: flex;
  margin-bottom: 100px;
}

.van-submit-bar {
  position: fixed;
  bottom: 50rem;
  left: 0;
  z-index: var(--van-submit-bar-z-index);
  width: 100%;
  background: var(--van-submit-bar-background);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}
</style>
